<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/compile-my-moreinfo.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-pull-right">保存</a>
			<h1 class="mui-title">编辑信息</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label> 出生日期 </label>
					<input type="text" id="birthday" class="mui-input-clear mui-input timePicker compile_my_data2" placeholder="请选择" readonly>
				</div>
				<div class="mui-input-row">
					<label> 身高(cm) </label>
					<input type="number" id="stature" class="mui-input-clear mui-input compile_my_data2" placeholder="例如：165" maxlength="3">
				</div>
				<div class="mui-input-row">
					<label> 体重(kg) </label>
					<input type="number" id="weight" class="mui-input-clear mui-input compile_my_data2" placeholder="例如：45.5" maxlength="5">
				</div>
				<div class="mui-input-row">
					<label> 毕业院校 </label>
					<input type="text" id="graduateSchool" class="mui-input-clear mui-input compile_my_data2" placeholder="例如：黑龙江工程学院" maxlength="30">
				</div>
			</form>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#compile_sex">
						性别<span id="sex" class="compile_my_data mui-pull-right"></span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#compile_constellation">
						星座<span id="constellation" class="compile_my_data mui-pull-right"></span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#compile_bloodType">
						血型<span id="bloodType" class="compile_my_data mui-pull-right"></span>
					</a>
				</li>
				<!--<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#compile_bwh">
						三围<span id="bwh" class="compile_my_data mui-pull-right"></span>
					</a>
				</li>-->
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#compile_educationalBackground">
						学历<span id="educationalBackground" class="compile_my_data mui-pull-right"></span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#compile_artisticCareer">
						从业年限<span class="compile_my_data mui-pull-right"><span id='artisticCareer'></span>年</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="city_a">
						所在城市<span id="city" class="compile_my_data mui-pull-right"></span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#compile_address">
						详细地址<span id="address" class="compile_my_data mui-pull-right"></span>
					</a>
				</li>

			</ul>
			<!--弹出背幕-->
			<div id="black_overlay"></div>
			<!--选择性别-->
			<div id="compile_sex" class="mui-popover mui-popover-action">
				<h5>性别</h5>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell sex1">
						<i class="iconfont sex1">&#xe634;</i><span>男</span>
					</li>
					<li class="mui-table-view-cell sex2">
						<i class="iconfont sex2">&#xe604;</i><span>女</span>
					</li>
				</ul>
			</div>
			<!--选择星座-->
			<div id="compile_constellation" class="mui-popover mui-popover-action">
				<h5>星座</h5>
				<div class="mui-scroll">
					<div class="mui-scroll-wrapper">
						<ul class="mui-table-view">
							<li>
								<img src="../images/icon/constellation/baiyang.png" />
								<span>白羊座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/jinniu.png" />
								<span>金牛座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/shuangzi.png" />
								<span>双子座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/juxie.png" />
								<span>巨蟹座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/shizi.png" />
								<span>狮子座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/chunv.png" />
								<span>处女座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/tianping.png" />
								<span>天秤座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/tianxie.png" />
								<span>天蝎座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/sheshou.png" />
								<span>射手座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/mojie.png" />
								<span>摩羯座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/shuiping.png" />
								<span>水瓶座</span>
							</li>
							<li>
								<img src="../images/icon/constellation/shuangyu.png" />
								<span>双鱼座</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--选择血型-->
			<div id="compile_bloodType" class="mui-popover mui-popover-action">
				<h5>血型</h5>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						A
					</li>
					<li class="mui-table-view-cell">
						B
					</li>
					<li class="mui-table-view-cell">
						AB
					</li>
					<li class="mui-table-view-cell">
						O
					</li>
					<li class="mui-table-view-cell">
						其它
					</li>
				</ul>
			</div>
			<!--修改三围-->
			<!--<div id="compile_bwh" class="mui-popover mui-popover-action">
				<h5>三围</h5>
				<form class="mui-input-group">
					<label>胸围(cm)</label>
					<input type="number" />
				</form>
				<form class="mui-input-group">
					<label>腰围(cm)</label>
					<input type="number" />
				</form>
				<form class="mui-input-group">
					<label>臀围(cm)</label>
					<input type="number" />
				</form>
				<button class="mui-btn btn-block btn-main">确定</button>
			</div>-->
			<!--选择学历-->
			<div id="compile_educationalBackground" class="mui-popover mui-popover-action">
				<h5>学历</h5>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						小学
					</li>
					<li class="mui-table-view-cell">
						初中
					</li>
					<li class="mui-table-view-cell">
						高中
					</li>
					<li class="mui-table-view-cell">
						大学专科
					</li>
					<li class="mui-table-view-cell">
						大学本科
					</li>
					<li class="mui-table-view-cell">
						研究生
					</li>
					<li class="mui-table-view-cell">
						博士
					</li>
				</ul>
			</div>
			<!--从艺年限-->
			<div id="compile_artisticCareer" class="mui-popover mui-popover-action">
				<h5>从艺年限</h5>
				<span></span>
				<form class="mui-input-group">
					<div class="mui-input-row mui-input-range">
						<input type="range" id='artisticC' value="0" min="0" max="60">
					</div>
				</form>
				<button class="mui-btn btn-block btn-main">确定</button>
			</div>
			<!--详细地址-->
			<div id="compile_address" class="mui-popover mui-popover-action">
				<h5>详细地址</h5>
				<form class="mui-input-group">
					<textarea rows="5" id="addressC"></textarea>
				</form>
				<button class="mui-btn btn-block btn-main">确定</button>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var myidarr = ['birthday', 'constellation', 'bloodType', 'stature', 'weight',  'graduateSchool', 'educationalBackground', 'artisticCareer', 'sex', 'city', 'address'];
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			var ioarr = self.pdata;
			console.log(JSON.stringify(ioarr));
			for (var i = 0; i < myidarr.length; i++) {
				if(/^(birthday|stature|weight|graduateSchool)$/.test(myidarr[i])) {
					document.getElementById(myidarr[i]).value = ioarr[myidarr[i]];
				} else if(myidarr[i] == 'artisticCareer') {
					document.getElementById('artisticCareer').innerHTML =
						document.getElementById("artisticC").value =
						$("#compile_artisticCareer span")[0].innerHTML = ioarr[myidarr[i]];
				} else {
					document.getElementById(myidarr[i]).innerHTML = ioarr[myidarr[i]];
				}
			}

			mui('.mui-scroll-wrapper').scroll();
			
			//选择出生日期
			mui('.mui-input-row').on('tap', 'input.timePicker', function() {
				var $this = $(this); //当前点击
				var dDate = new Date();
				var minDate = new Date();
				minDate.setFullYear(dDate.getFullYear() - 100, dDate.getMonth(), dDate.getDate());
				var maxDate = new Date();
				maxDate.setFullYear(dDate.getFullYear() + 100, dDate.getMonth(), dDate.getDate());
				plus.nativeUI.pickDate(function(e) { //添加日期
					var pickDate = e.date;
					var pd = pickDate.getFullYear() + "-" + (pickDate.getMonth() + 1) + "-" + pickDate.getDate();
					$this.val(pd.toLocaleString()); //显示到页面上
				}, function(e) {
					$this.val('');
				}, {
					title: '请选择出生日期',
					date: dDate,
					minDate: minDate,
					maxDate: maxDate
				});
			});

			//选择星座、性别
			mui("#compile_constellation,#compile_sex").on('tap', 'li', function() {
				var id = $(this).parents('.mui-popover')[0].id;
				var innerId = id.substring(id.indexOf('_') + 1, id.length);
				document.getElementById(innerId).innerText = $(this).find('span').text();
				// 星座区域滚动回到顶部
				mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0);
			});

			//选择血型、学历
			mui("#compile_bloodType,#compile_educationalBackground").on('tap', '.mui-table-view-cell', function() {
				var id = $(this).parents('.mui-popover')[0].id;
				var innerId = id.substring(id.indexOf('_') + 1, id.length);
				document.getElementById(innerId).innerText = this.innerText;
			});
			
			// 修改三围
//			mui("#compile_bwh").on('tap', 'button', function() {
//				var allRight = true;
//				var data = [];
//				$(this).siblings('form').each(function() {
//					var value = $(this).find('input').val();
//					if(!/^([1-9][0-9])|([1-9][0-9][0-9])$/.test(value)) {
//						allRight = false;
//					} else {
//						data.push(value);
//					}
//				})
//				if(!allRight) {
//					mui.toast('三围格式填写错误');
//					data = [];
//					$(this).siblings('form input').val('');
//				} else {
//					document.getElementById("bwh").innerHTML = data.join('-');
//				}
//			})

			//从艺年限
			mui("#compile_artisticCareer").on('tap', 'button', function() {
				document.getElementById('artisticCareer').innerHTML = document.getElementById("artisticC").value;
			});

			mui("#compile_artisticCareer").on('input', 'input', function() {
				$(this).parents('form').siblings('span').text(this.value);
			})

			//详细地址
			mui("#compile_address").on('tap', 'button', function() {
				var addressC = document.getElementById("addressC");
				document.getElementById('address').innerHTML = addressC.value;
				addressC.value = '';
			});

			//选择城市
			mui('.mui-table-view-cell').on('tap', '#city_a', function() {
				plus.nativeUI.showWaiting();
				Common.openWindow('city-list.html');
			});
			
			document.addEventListener('changeCity', function() {
				var myinfocity = event.detail.city;
				document.getElementById("city").innerHTML = myinfocity;
			});

			// 通用 弹出框选择任意一项后隐藏
			mui('.mui-popover').on('tap', 'li,button', function() {
				mui('.mui-popover').popover('hide');
			})

			//保存
			mui('header').on('tap', '.mui-pull-right', function() {
				$("input").blur();
				var jstr = {};
				for (var i = 0; i < myidarr.length; i++) {
					if(/^(birthday|stature|weight|graduateSchool)$/.test(myidarr[i])) {
						jstr[myidarr[i]] = document.getElementById(myidarr[i]).value;
					} else {
						jstr[myidarr[i]] = document.getElementById(myidarr[i]).innerHTML;
					}
				}
				jstr.id = '';
				//上传数据
				Common.ajax({
					url : baseURL + 'selfInfo/updateMore.json',
					type : 'POST',
					data : 'key=' + JSON.stringify(jstr)
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.code == '-1') {
						mui.toast('登录失效，请重新登录');
					} else {
						//获取父页面
						var parentPage = self.opener();
						mui.fire(parentPage, 'mymoreinfochange');
						//显示更多信息页面
						mui.back('my-more-info.html');
						mui.toast('信息保存成功');
					}
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
			})
		});
	</script>

</html>